<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>文创商城</title>
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/css/文创商城.css">
    <link rel="stylesheet" href="/static/css/public.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">


</head>
<body>
<!--导航栏-->
<nav class="navbar navbar-dark bg-dark fixed-top">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-calendar"
                 viewBox="0 0 16 16">
                <path
                        d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5M1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4z" />
            </svg>
            首页
        </a>
        <a class="navbar-brand" href="#">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                 class="bi bi-newspaper" viewBox="0 0 16 16">
                <path
                        d="M0 2.5A1.5 1.5 0 0 1 1.5 1h11A1.5 1.5 0 0 1 14 2.5v10.528c0 .3-.05.654-.238.972h.738a.5.5 0 0 0 .5-.5v-9a.5.5 0 0 1 1 0v9a1.5 1.5 0 0 1-1.5 1.5H1.497A1.497 1.497 0 0 1 0 13.5zM12 14c.37 0 .654-.211.853-.441.092-.106.147-.279.147-.531V2.5a.5.5 0 0 0-.5-.5h-11a.5.5 0 0 0-.5.5v11c0 .278.223.5.497.5z" />
                <path
                        d="M2 3h10v2H2zm0 3h4v3H2zm0 4h4v1H2zm0 2h4v1H2zm5-6h2v1H7zm3 0h2v1h-2zM7 8h2v1H7zm3 0h2v1h-2zm-3 2h2v1H7zm3 0h2v1h-2zm-3 2h2v1H7zm3 0h2v1h-2z" />
            </svg>
            资讯
        </a>
        <a class="navbar-brand" href="#">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                 class="bi bi-journal-text" viewBox="0 0 16 16">
                <path
                        d="M5 10.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5m0-2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5m0-2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5m0-2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5" />
                <path
                        d="M3 0h10a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-1h1v1a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v1H1V2a2 2 0 0 1 2-2" />
                <path
                        d="M1 5v-.5a.5.5 0 0 1 1 0V5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1zm0 3v-.5a.5.5 0 0 1 1 0V8h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1zm0 3v-.5a.5.5 0 0 1 1 0v.5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1z" />
            </svg>
            名录
        </a>
        <a class="navbar-brand" href="#">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eye"
                 viewBox="0 0 16 16">
                <path
                        d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8M1.173 8a13 13 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5s3.879 1.168 5.168 2.457A13 13 0 0 1 14.828 8q-.086.13-.195.288c-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5s-3.879-1.168-5.168-2.457A13 13 0 0 1 1.172 8z" />
                <path
                        d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5M4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0" />
            </svg>
            展览
        </a>
        <a class="navbar-brand" href="#">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-book"
                 viewBox="0 0 16 16">
                <path
                        d="M1 2.828c.885-.37 2.154-.769 3.388-.893 1.33-.134 2.458.063 3.112.752v9.746c-.935-.53-2.12-.603-3.213-.493-1.18.12-2.37.461-3.287.811zm7.5-.141c.654-.689 1.782-.886 3.112-.752 1.234.124 2.503.523 3.388.893v9.923c-.918-.35-2.107-.692-3.287-.81-1.094-.111-2.278-.039-3.213.492zM8 1.783C7.015.936 5.587.81 4.287.94c-1.514.153-3.042.672-3.994 1.105A.5.5 0 0 0 0 2.5v11a.5.5 0 0 0 .707.455c.882-.4 2.303-.881 3.68-1.02 1.409-.142 2.59.087 3.223.877a.5.5 0 0 0 .78 0c.633-.79 1.814-1.019 3.222-.877 1.378.139 2.8.62 3.681 1.02A.5.5 0 0 0 16 13.5v-11a.5.5 0 0 0-.293-.455c-.952-.433-2.48-.952-3.994-1.105C10.413.809 8.985.936 8 1.783" />
            </svg>
            百科
        </a>
        <a class="navbar-brand" href="#">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                 class="bi bi-file-earmark" viewBox="0 0 16 16">
                <path
                        d="M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5z" />
            </svg>
            公约
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasDarkNavbar"
                aria-controls="offcanvasDarkNavbar" aria-label="切换导航">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="offcanvas offcanvas-end text-bg-dark" tabindex="-1" id="offcanvasDarkNavbar"
             aria-labelledby="offcanvasDarkNavbarLabel">
            <div class="offcanvas-header">
                <h5 class="offcanvas-title" id="offcanvasDarkNavbarLabel">我的</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas"
                        aria-label="关闭"></button>
            </div>
            <div class="offcanvas-body">
                <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="#">在线客服</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">意见反馈</a>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
                           aria-expanded="false">订单</a>
                        <ul class="dropdown-menu dropdown-menu-dark">
                            <li><a class="dropdown-item" href="#">购物车</a></li>
                            <li><a class="dropdown-item" href="#">订单详情</a></li>
                        </ul>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
                           aria-expanded="false">账号管理</a>
                        <ul class="dropdown-menu dropdown-menu-dark">
                            <li><a class="dropdown-item" href="#">登录/注册</a></li>
                            <li><a class="dropdown-item" href="#">修改密码</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</nav>



<!--轮播图-->
<div id="carouselExampleInterval" class="carousel slide" data-bs-ride="carousel">
    <div class="carousel-inner">
        <div class="carousel-item active" data-bs-interval="10000">
            <img src="/static/img/轮播图图片01.jpeg" class="d-block w-100" alt="...">
        </div>
        <div class="carousel-item" data-bs-interval="2000">
            <img src="/static/img/轮播图图片02.jpg" class="d-block w-100" alt="...">
        </div>
        <div class="carousel-item">
            <img src="/static/img/轮播图图片03.jpeg" class="d-block w-100" alt="...">
        </div>
        <div class="carousel-item">
            <img src="/static/img/轮播图图片04.jpg" class="d-block w-100" alt="...">
        </div>
        <a class="carousel-control-prev" href="#carouselExampleInterval" role="button" data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleInterval" role="button" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
        </a>
    </div>

    <div class="container my-5">
        <div class="row">
            <div class="col-12">
                <div class="traditional-divider">
                    <span>文创精品</span>
                </div>
            </div>
        </div>
    </div>

    <!-- 次级导航栏与搜索框合并 -->
    <div class="secondary-nav-container">
        <div class="container">
            <div class="row align-items-center">
                <!-- 导航菜单 -->
                <div class="col-md-8">
                    <ul class="nav traditional-pills">
                        <li class="nav-item">
                            <a class="nav-link active" href="#" data-bs-toggle="pill">
                                <i class="bi bi-shop"></i> 文创商城
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link"  href="购物车.html">
                                <i class="bi bi-cart3"></i>购物车
                            </a>
                        </li>
                    </ul>
                </div>
<!--搜索框-->
                <div class="search-box">
                    <input type="text" class="search-input" placeholder="输入关键词搜索...">
                    <button class="camera-btn" onclick="openCamera()">
                        <svg class="camera-icon" viewBox="0 0 24 24">
                            <path d="M4,4H7L9,2H15L17,4H20A2,2 0 0,1 22,6V18A2,2 0 0,1 20,20H4A2,2 0 0,1 2,18V6A2,2 0 0,1 4,4M12,7A5,5 0 0,0 7,12A5,5 0 0,0 12,17A5,5 0 0,0 17,12A5,5 0 0,0 12,7M12,9A3,3 0 0,1 15,12A3,3 0 0,1 12,15A3,3 0 0,1 9,12A3,3 0 0,1 12,9Z" />
                        </svg>
                    </button>
                    <button class="search-btn">搜索</button>
                </div>

                <!-- 拍照识别模态框 -->
                <div id="cameraModal" class="modal">
                    <div class="modal-content">
                        <span class="close" onclick="closeCamera()">&times;</span>
                        <h2>拍照识别</h2>
                        <p>将物品置于框内拍摄，系统将自动识别并搜索相关信息</p>

                        <div class="camera-container">
                            <video id="cameraPreview" autoplay playsinline></video>
                            <canvas id="cameraCanvas" style="display:none;"></canvas>
                        </div>

                        <div class="recognition-result" id="recognitionResult">
                            <h3>识别结果：<span id="recognizedObject">青花瓷茶壶</span></h3>
                            <p>正在为您搜索相关商品...</p>
                        </div>

                        <div class="camera-actions">
                            <button class="camera-action-btn" id="takePhotoBtn">拍照识别</button>
                            <button class="camera-action-btn secondary" onclick="closeCamera()">取消</button>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>


    <!-- 侧边导航栏和商品展示区域 -->
    <div class="container">
        <div class="row">
            <!-- 垂直导航选项卡 -->
            <div class="col-md-3">
                <div class="nav flex-column nav-pills vertical-navbar" id="v-pills-tab" role="tablist" aria-orientation="vertical">
                    <a class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill" href="#v-pills-home" role="tab"
                       aria-controls="v-pills-home" aria-selected="true">火爆热卖</a>
                    <a class="nav-link" id="v-pills-profile-tab" data-bs-toggle="pill" href="#v-pills-profile" role="tab"
                       aria-controls="v-pills-profile" aria-selected="false">猜你喜欢</a>
                    <a class="nav-link" id="v-pills-messages-tab" data-bs-toggle="pill" href="#v-pills-messages" role="tab"
                       aria-controls="v-pills-messages" aria-selected="false">特别活动</a>
                    <a class="nav-link" id="v-pills-clothing-tab" data-bs-toggle="pill" href="#v-pills-clothing" role="tab"
                       aria-controls="v-pills-clothing" aria-selected="false">服饰织物</a>
                    <a class="nav-link" id="v-pills-bags-tab" data-bs-toggle="pill" href="#v-pills-bags" role="tab"
                       aria-controls="v-pills-clothing" aria-selected="false">百搭包袋</a>
                    <a class="nav-link" id="v-pills-bags-shoe" data-bs-toggle="pill" href="#v-pills-shoe" role="tab"
                       aria-controls="v-pills-shoe" aria-selected="false">手工鞋类</a>
                    <a class="nav-link" id="v-pills-gourmet-tab" data-bs-toggle="pill" href="#v-pills-gourmet" role="tab"
                       aria-controls="v-pills-gourmet" aria-selected="false">非遗食饮</a>
                    <a class="nav-link" id="v-pills-ornaments-tab" data-bs-toggle="pill" href="#v-pills-ornaments" role="tab"
                       aria-controls="v-pills-ornaments" aria-selected="false">非遗饰品</a>
                    <a class="nav-link" id="v-pills-homeware-tab" data-bs-toggle="pill" href="#v-pills-homeware" role="tab"
                       aria-controls="v-pills-homeware" aria-selected="false">家居用品</a>
                    <a class="nav-link" id="v-pills-art1-tab" data-bs-toggle="pill" href="#v-pills-art1" role="tab"
                       aria-controls="v-pills-art1" aria-selected="false">非遗包袋</a>
                    <a class="nav-link" id="v-pills-art2-tab" data-bs-toggle="pill" href="#v-pills-art2" role="tab"
                       aria-controls="v-pills-art2" aria-selected="false">艺术摆件</a>
                    <a class="nav-link" id="v-pills-musical-tab" data-bs-toggle="pill" href="#v-pills-musical" role="tab"
                       aria-controls="v-pills-musical" aria-selected="false">非遗乐器</a>
                </div>
            </div>


            <!-- 选项卡内容 -->
            <div class="col-md-9">
                <div class="tab-content" id="v-pills-tabContent">
                    <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
                        <div class="container">
                            <div class="row row-cols-1 row-cols-md-3 g-4" id="hot-products">
                                <!-- 火爆热卖商品将通过JS动态加载 -->
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">
                        <div class="container">
                            <div class="row row-cols-1 row-cols-md-3 g-4" id="recommended-products">
                                <!-- 猜你喜欢商品将通过JS动态加载 -->
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">
                        <div class="container">
                            <div class="row row-cols-1 row-cols-md-3 g-4" id="special-products">
                                <!-- 特别活动商品将通过JS动态加载 -->
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="v-pills-clothing" role="tabpanel" aria-labelledby="v-pills-clothing-tab">
                        <div class="container">
                            <div class="row row-cols-1 row-cols-md-3 g-4" id="clothing-products">
                                <!-- 服饰织物商品将通过JS动态加载 -->
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="v-pills-bags" role="tabpanel" aria-labelledby="v-pills-bags-tab">
                        <div class="container">
                            <div class="row row-cols-1 row-cols-md-3 g-4" id="bags-products">
                                <!-- 非遗包袋商品将通过JS动态加载 -->
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="v-pills-shoe" role="tabpanel" aria-labelledby="v-pills-shoe-tab">
                        <div class="container">
                            <div class="row row-cols-1 row-cols-md-3 g-4" id="shoe-products">
                                <!-- 手工鞋类商品将通过JS动态加载 -->
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="v-pills-gourmet" role="tabpanel" aria-labelledby="v-pills-gourmet-tab">
                        <div class="container">
                            <div class="row row-cols-1 row-cols-md-3 g-4" id="gourmet-products">
                                <!-- 非遗食饮商品将通过JS动态加载 -->
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="v-pills-ornaments" role="tabpanel" aria-labelledby="v-pills-ornaments-tab">
                        <div class="container">
                            <div class="row row-cols-1 row-cols-md-3 g-4" id="ornaments-products">
                                <!-- 非遗饰品商品将通过JS动态加载 -->
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="v-pills-homeware" role="tabpanel" aria-labelledby="v-pills-homeware-tab">
                        <div class="container">
                            <div class="row row-cols-1 row-cols-md-3 g-4" id="homeware-products">
                                <!-- 家居用品商品将通过JS动态加载 -->
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="v-pills-art2" role="tabpanel" aria-labelledby="v-pills-art2-tab">
                        <div class="container">
                            <div class="row row-cols-1 row-cols-md-3 g-4" id="art2-products">
                                <!-- 艺术摆件商品将通过JS动态加载 -->
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="v-pills-musical" role="tabpanel" aria-labelledby="v-pills-musical-tab">
                        <div class="container">
                            <div class="row row-cols-1 row-cols-md-3 g-4" id="musical-products">
                                <!-- 非遗乐器商品将通过JS动态加载 -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 分页 -->
        <div class="antique-pagination">
            <a href="#" class="page-item antique-btn" title="首页">«</a>
            <a href="#" class="page-item antique-btn" title="上一页">‹</a>
            <a href="#" class="page-item antique-btn active">一</a>
            <a href="#" class="page-item antique-btn">二</a>
            <a href="#" class="page-item antique-btn">三</a>
            <span class="page-item antique-divider">...</span>
            <a href="#" class="page-item antique-btn" title="下一页">›</a>
            <a href="#" class="page-item antique-btn" title="末页">»</a>
            <div class="antique-page-info">
                共 <span class="total-pages">五</span> 页，当前第 <span class="current-page">一</span> 页
            </div>
        </div>
    </div>
</div>


<footer class="footer mt-5 py-4" style="background: #2A3547; color: #F8F4E9;">
    <div class="container">
        <div class="row">
            <div class="col-md-4">
                <h5 class="footer-title">关于我们</h5>
                <p>传承中华文化，创新文创设计</p>
            </div>
            <div class="col-md-4">
                <h5 class="footer-title">联系方式</h5>
                <p><a href="客服.html">联系我们</a> </p>
                <p>Email: service@wenchuang.com</p>
            </div>
            <div class="col-md-4">
                <h5 class="footer-title">关注我们</h5>
                <div class="social-icons">
                    <img src="/static/img/抖音图标.jpg" height="25" width="25"/>
                </div>
                <p>123456789</p>
            </div>
        </div>
        <div class="text-center mt-3 pt-3" style="border-top: 1px solid #7B9EA8;">
            <p>©四川非遗版权所有</p>
        </div>
    </div>
</footer>

</body>
</html>

<script src="/static/js/文创商城.js"></script>
<script src="/static/js/bootstrap.bundle.min.js"></script>
<script src="/static/js/jquery.js"></script>